<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>The Text to Speech App</title>
    <link rel="shortcut icon" href="/wavs/favicon.ico">

</head>

<body>


    <div class="w-50 p-3 ml-3">
        <a href="/">Home</a>


        <div id="content" class="jumbotron">
            <h1 class="display-4">Text To Speech </h1>
            <p class="lead">NVIDIA Tacotron2 and waveglow based Korean/English TTS model.</p>
            <hr class="my-4">
            <form id="input_form" name="input_form" method="POST" action="/tts">
                <div class="form-group">
                    <label for="select">언어 (language) </label>
                    <select name="input_language" class="form-control">
                        <option value="kr" {{ 'selected' if opt_lang == 'kr'else '' }}>한글</option>
                        <option value="en" {{ 'selected' if opt_lang == 'en'else '' }}>English</option>
                    </select></div>

                <div class="form-group">
                    <textarea class="form-control" id="text_area" name="input_text" placeholder="{{sample_text}}"
                        cols="40" rows="8"></textarea></div>
                <div id="btns" class="form-group">
                    <input id="btn" type="submit" class="btn btn-primary mb-2" value="음성합성(TTS)" />
                </div>
            </form>
            <div id="warning" class="alert alert-warning" role="alert" style="display: none">
                텍스트를 입력하세요. (Input the texts)
              </div>

            <hr class="my-4">
            {% if voice %}
            <div class="media">
                <div class="media-body pull-right">
                    <p class="lead"> 합성된 음성 (Result) </p>

                    <audio controls preload="auto" autoplay>
                        <source src="http://localhost:5000/{{voice}}" type="audio/mp3">
                    </audio>
                </div>
                {% endif %}

            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(() => {
                $("#btns").prepend('<div id="loading" style="display : none;" ><button class="btn btn-primary" type="button" disabled><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>Loading...</button></div>')
            });

            $("#input_form").submit(() => {
                var pass = true;
                if (pass == false) {
                    return true
                }
                
                if (!$("#text_area").val()) {
                    $('#warning').show();
                    return false;
                } else {
                    $("#loading").show();
                    $("#btn").hide()
                    $('#warning').hide();
                    return true;
                }

            });


        </script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>


</body>

</html>